<template>
	<div class="main-header-info">
		<div class="operation">
			<span><el-icon><bell/></el-icon></span>
			<span><span class="dot"></span><el-icon><ChatDotRound/></el-icon></span>
			<span><el-icon><Postcard/></el-icon></span>
		</div>
		<div class="info">
			<el-dropdown>
			<span class="user-info">
				<el-avatar :size="30" class="avatar" src=""/>
				<span class="name">张三</span>
			</span>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item @click="handleExitClick">
							<el-icon><CircleCloseFilled/></el-icon>
							退出系统
						</el-dropdown-item>
					</el-dropdown-menu>
					<el-dropdown-item #divided>
					
					</el-dropdown-item>
				</template>
			</el-dropdown>
		</div>
	</div>
</template>

<script setup lang="ts">
import { Bell, ChatDotRound, CircleCheckFilled, CircleCloseFilled, Postcard } from '@element-plus/icons-vue'
import { LocalStorageUtils } from '@/utils/StorageUtils.ts'
function handleExitClick(){
	LocalStorageUtils.removeKey("wisdomToken")
	LocalStorageUtils.removeKey("wisdomUserInfo")
}
</script>

<style scoped lang="less">
.main-header-info{
	display: flex;
	align-items: center;
}
.operation{
	display: inline-flex;
	margin-right: 20px;
	span{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 35px;
		// 鼠标移入。
		&:hover{
			background: #f2f2f2;
			cursor: pointer;
		}
		i{
			font-size: 20px;
		}
		.dot{
			position: absolute;
			top: 3px;
			right: 3px;
			z-index: 10;
			width: 6px;
			height: 6px;
			background: red;
			border-radius: 100%;
		}
	}
}

.info{
	.user-info{
		display: flex;
		align-items: center;
		cursor: pointer;
		
		.name{
			margin-left: 5px;
		}
	}
}
.info {
	:global(.el-dropdown-menu_item) {
		line-height: 36px !important;
		padding: 6px 22px;
	}
}
</style>